<template>
    <Form ref="form" :model="form" :rules="ruleValidate" :label-width="80">

        <FormItem label="年级" prop="grade_id">
            <RadioGroup v-model="form.grade_id" @on-change="gradeChange">
                <Radio v-for="(item,index) in gradeList" :key="index" :label="item.id">{{ item.grade_name.zh? item.grade_name.zh: item.grade_name.mn }}</Radio>
            </RadioGroup>
        </FormItem>

        <FormItem label="班级" prop="class_id">
            <RadioGroup v-if="classList.length != 0" @on-change="studentData" v-model="form.class_id">
                <Radio v-for="(item,index) in classList" :key="index" :label="item.eclass_id">{{ item.eclass_name.zh?item.eclass_name.zh:item.eclass_name.mn }}</Radio>
            </RadioGroup>
            <Radio v-if="classList.length == 0" disabled>暂无数据（请选择年级）</Radio>
        </FormItem>

        <FormItem label="实到人数" prop="classnumber">
            <InputNumber v-model="form.classnumber" size="small"></InputNumber>
        </FormItem>

        <FormItem label="自习时间" prop="types">
            <RadioGroup v-model="form.types">
                <Radio v-for="(item,index) in ridioList" :key="index" :label="item.key">{{ item.value }}</Radio>
            </RadioGroup>
        </FormItem>

        <FormItem label="状态" prop="typelx">
            <RadioGroup v-model="form.typelx" @on-change="typeChange">
                <Radio v-for="(item,index) in typeList" :key="index" :label="item.key">{{ item.value }}</Radio>
            </RadioGroup>
        </FormItem>

        <FormItem v-if="ruleState" label="异常学生">
            <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
                <Checkbox :indeterminate="indeterminate" :value="checkAll" @click.prevent.native="handleCheckAll">全选</Checkbox>
            </div>
            <CheckboxGroup v-model="form.studentuser_id" @on-change="checkAllGroupChange">
                <Checkbox v-for="(item,index) in studentList" :key="index" :label="item.value">{{ item.label }}</Checkbox>
            </CheckboxGroup>
        </FormItem>

        <FormItem v-if="ruleState" label="细则" prop="watchlist_rules_id">
            <RadioGroup v-model="form.watchlist_rules_id" @on-change="ruleChange" vertical>
                <Radio v-for="(item,index) in ruleList" :key="index" :label="item.key">{{ item.value }}</Radio>
            </RadioGroup>
        </FormItem>

        <FormItem v-if="scores" label="分数" prop="fixed_score">
            <InputNumber v-model="form.fixed_score" :min="min" :max="max" size="small"></InputNumber>
        </FormItem>
        
        <FormItem label="上传图片" v-if="imgStates">
            <UpImg @uploadData="uploadData" :currentImg="imgurls" ref="acquire"></UpImg>
        </FormItem>
        
        <FormItem label="备注" prop="remarks.zh">
            <Input v-model="form.remarks.zh" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入备注可以为空"></Input>
        </FormItem>

        <FormItem>
            <Button v-if="conditions" type="primary" @click="handleSubmit('form')" :loading="butload">确认</Button>
            <Button v-if="!conditions" type="primary" @click="handleSubmit('form')" :loading="butload">修改</Button>
        </FormItem>
    </Form>
</template>

<script>
export default {
    props: {
        condition: {
            type: Number,
            default: null,
        },
        conditions: {
            type: Boolean,
            default: false,
        },
    },
    components: {
        UpImg: resolve => {require(['&/Public/UpImg.vue'], resolve);},
    },
    data () {
        return {
            form: {
                remarks: {
                    zh:null,
                    en:null,
                    mn:null,
                },
                dutyteacher: null,
                watchlist_id: 19,
                watchlist_rules_id: null,
                fixed_score: null,
                typelx: 1,
                types: 1,
                grade_id: null,
                class_id: null,
                file_cache_id: null,
                classnumber: 0,
                studentuser_id: []
            },
            butload: false,
            ruleState: false,
            classState: false,
            imgurls: null,
            imgStates: false,
            scores: false,
            score: null,
            max: 0,
            min: 0,
            typeList: [
                {key: 1, value:'正常'},
                {key: 2, value:'异常'}
            ],
            ridioList: [
                {key: 2, value:'第一晚自习'},
                {key: 3, value:'第二晚自习'},
                {key: 4, value:'第三晚自习'}
            ],
            
            indeterminate: true,
            checkAll: false,

            gradeList: [],
            gradeUrl: 'api/base/v1/get/grade/list',
            classList: [],

            classUrl: 'api/eclass/v1/eclass/eclass_bes?grade_id=',
            ruleList: [],
            ruleUrl: 'api/watchlist/v1/get/educationquerys/list?watchlist_id=19',
            url: 'api/watchlist/v1/watchlistfromdatas/edit/',
            urls: 'api/watchlist/v1/watchlistfromdatas/editsd/',
            selUrl: 'api/watchlist/v1/watchlistfromdatas/find/',
            studUrl: 'api/student/v1/studentlearn/studentname?eclass_id=',
            studentList: [],

            ruleValidate: {
                grade_id:[
                    { required: true, type: 'number', message: '请选择年级', trigger: 'change' }
                ],
                class_id:[
                    { required: true, type: 'number', message: '请选择班级', trigger: 'change' }
                ],
                classnumber:[
                    { required: true, type: 'number', message: '请输入实到人数', trigger: 'blur' }
                ],
                typelx:[
                    { required: true, type: 'number', message: '请选择状态', trigger: 'blur' }
                ],
                types:[
                    { required: true, type: 'number', message: '请选择自习时间', trigger: 'blur' }
                ],
            },
        }
    },
    methods: {

        // ==================================================
        // 细则信息
        // ==================================================
        studentData(index){
            if (index == null) return
            this.form.studentuser_id = []
            this.studentList = []
            this.$http.get(this.studUrl + index).then(val => {
                if(val.code == '200'){
                    let arr = []
                    val.data.forEach(el => {
                        arr.push({
                            value : el.studentbase.user_id,
                            label : el.studentbase.student_name + '(' + el.studentbase.student_learncode + ')',
                        })
                    })
                    this.studentList = arr
                }
            }).catch(err => {
                this.$Message.info('学生获取失败！');
            })
        },
        
        handleCheckAll () {
            if (this.indeterminate) {
                this.checkAll = false;
            } else {
                this.checkAll = !this.checkAll;
            }
            this.indeterminate = false;

            if (this.checkAll) {
                this.studentList.forEach((el,i) => {
                    this.form.studentuser_id.push(el.value)
                })
            } else {
                this.form.studentuser_id = [];
            }
        },
        checkAllGroupChange (data) {
            if (data.length === this.studentList.length) {
                this.indeterminate = false;
                this.checkAll = true;
            } else if (data.length > 0) {
                this.indeterminate = true;
                this.checkAll = false;
            } else {
                this.indeterminate = false;
                this.checkAll = false;
            }
        },

        // ==================================================
        // 表单验证
        // ==================================================
        handleSubmit (name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.submit()
                } else {
                    this.$Message.error('请检查填写内容');
                }
            })
        },

        // ==================================================
        // 提交
        // ==================================================
        submit(){
            let datas = JSON.parse(JSON.stringify(this.form))
            if (!this.scores) {
                delete datas.fixed_score
            }
            this.butload = true
            if (this.conditions == true) {
                console.log('确认')
                this.submits(this.urls, datas)
            }else{
                console.log('修改')
                this.submits(this.url, datas)
            }
        },
        submits(url, datas){
            this.$http.post(url + this.condition,datas).then(val => {
                if(val.code == '200'){
                    this.$emit('requery',true)
                    this.butload = false
                }
                if(val.data.code != undefined && val.data.code != '200'){
                    this.$vux.loading.hide()
                    this.$Message.info(val.data.message);
                    this.butload = false
                }
            }).catch(err => {
                this.$Message.info('数据添加失败！');
                this.butload = false
            })
        },
        
        // ==================================================
        // 图片上传回调 
        // ==================================================
        uploadData(data){
            console.log('上传图片',data)
            this.form.file_cache_id = data.id
        },

        // ==================================================
        // 选择状态
        // ==================================================
        typeChange(index) {
            if (index == 2) {
                this.ruleState = true
                this.scores = false
                this.form.watchlist_rules_id = null
            }else{
                this.ruleState = false
                this.scores = false
                this.form.watchlist_rules_id = null
            }
        },

        // ==================================================
        // 选择细则
        // ==================================================
        ruleChange(index) {
            let it = this.ruleList.find(item => item.key == index)
            if(it != undefined){
                if(it.fixed_score == null){
                    this.scores = true
                    this.score = '(' + it.lowest_score + ' 到 ' + it.highest_score + ' 分)'
                }else{
                    this.scores = false
                    this.score = null
                }
                this.min = it.lowest_score
                this.max = it.highest_score
            }
        },

        // ==================================================
        // 细则信息
        // ==================================================
        ruleData(){
            this.$http.get(this.ruleUrl).then(val => {
                if(val.code == '200'){
                    let arr = []
                    val.data.forEach(el => {
                        let label = el.entry_content + '(减 ' + el.lowest_score + ' 到 ' + el.highest_score + ' 分)'
                        arr.push({
                            key : el.watchlist_rules_id,
                            value : label,
                            fixed_score: el.fixed_score,
                            lowest_score: el.lowest_score,
                            highest_score: el.highest_score,
                        })
                    })
                    this.ruleList = arr
                }
            }).catch(err => {
                this.$Message.info('值班细则获取失败！');
            })
        },

        // ==================================================
        // 年级信息
        // ==================================================
        gradeData(){
            this.$http.get(this.gradeUrl).then(val => {
                if(val.code == '200'){
                    this.gradeList = val.data
                }
            }).catch(err => {
                this.$Message.info('年级信息获取失败');
            })
        },

        // ==================================================
        // 班级信息
        // ==================================================
        gradeChange(index){
            this.classList = []
            this.form.class_id = null
            this.$http.get(this.classUrl + index).then(val => {
                if(val.code == '200'){
                    this.classList = val.data
                }
            }).catch(err => {
                this.$Message.info('班级信息获取失败');
            })
        },

        // ==================================================
        // 单条信息
        // ==================================================
        selData(index){
            this.$http.get(this.selUrl + index).then(val => {
                if(val.code == '200'){
                    let datas = val.data
                    this.form.remarks = datas.remarks
                    this.form.grade_id = datas.grade_id
                    this.form.typelx = datas.typelx
                    this.gradeChange(datas.grade_id)
                    setTimeout(() => {
                        this.form.class_id = datas.class_id
                        this.studentData(datas.class_id)
                        this.form.studentuser_id = datas.studentuser_id
                    },2000)
                    if (datas.typelx != '1') {
                        this.ruleState = true
                        this.form.watchlist_rules_id = datas.watchlist_rules_id
                        this.ruleChange(datas.watchlist_rules_id)
                        setTimeout(() => {
                            if (this.scores) {
                                this.form.fixed_score = datas.fixed_score
                            }
                        },1000)
                    }
                    this.form.types = datas.types
                    this.form.classnumber = datas.classnumber
                    this.imgurls = datas.img
                    this.imgStates = true
                }
            }).catch(err => {
                this.$Message.info('单条信息获取失败');
            })
        },
    },
    mounted(){
    },
    created(){
        this.ruleData()
        this.gradeData()
        this.selData(this.condition)
    },
};
</script>